<template>
	<view class="u-flex form-select-user" :class="{active: label !== ''}" @click="open()">
		<view class="select-user-name u-flex-1">
			{{label||valueText||placeholder}}
		</view>
		<view class="select-user-icon">
			<u-icon name="arrow-right"></u-icon>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			placeholder: String,
			value: String
		},
		data() {
			return {
				label: ''
			}
		},
		computed: {
			valueText: {
				get() {
					let _res = ''
					if (this.value !== '' && this.label === '') {
						this.$u.api.getContactsInfo({id: this.value}).then(res => {
							this.label = res.realName
						}).catch(err => {
							console.error(err)
						})
					}
					return _res
				},
				set() {}
			}
		},
		methods: {
			open() {
				this.$u.route('pages/public/au-select-user', {id: this.$store.state.vuex_user.userInfo.organizeId})
				uni.$once('selected-user', (data) => {
					this.label = data.label
					this.$emit('input', data.value)
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.form-select-user {
		width: 100%;
		color: #C0C4CC;
	}
	.form-select-user.active {
		color: #333333;
	}
</style>